<template>
  <!--4.使用组件-->
  <VueAliplayer v-if="loding" :vid="vid" :options="options"></VueAliplayer>
  <div v-else>加载中</div>
</template>

<script>
//1.引入npm 的vue-alipayer-v2下载的组件
// https://www.npmjs.com/package/vue-aliplayer-v2
import VueAliplayer from 'vue-aliplayer-v2';
import {Message} from "element-ui";

export default {
  //2.注册到components组件中
  components: {
    VueAliplayer,
  },
  props: {
    videoId: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '387px'
    }
  },
  watch: {
    videoId: function (newVal, oldVal) {
      // console.log("newVal",newVal)
      // console.log("oldVal",oldVal)
      this.options.vid = newVal
    }
  },
  //3.需要返回的data数据
  data() {
    return {
      loding:false,
      /**
       *  对aliplayer进行配置
       * **/
      vid: 'pc_jPrismPlayer',
      //vue-aliplayer-v2提供配置器为options， 所有配置项必须在options，否则无法正常显示
      options: {
        vid: this.$props.videoId,
        playauth: '',
        width: this.$props.width,                //播放器宽度
        height: this.$props.height,              //播放器高度
        isLive: false,                //播放内容是否为直播，直播时会禁止用户拖动进度条。
        playsinline: true,             //H5 是否内置播放
        useH5Prism: true,              //指定使用 H5 播放器。
        rePlay: false,                 //播放器自动循环播放.
        preload: true,                 //播放器自动加载，目前仅 h5 可用。
        controlBarVisibility: 'hover', //控制面板的实现，默认为‘hover’。可选的值为：‘click’、‘hover’、‘always’。
        autoplay: false,               //播放器是否自动播放，在移动端 autoplay 属性会失效。Safari11 不会自动开启自动播放如何开启。
        enableSystemMenu: true,        //是否允许系统右键菜单显示，默认为 false。
        showBarTime: '10000',          //控制栏自动隐藏时间（ms）。
        disableSeek: true,            //禁用进度条的 Seek，默认为 false，仅 Flash 支持。
      }
    }
  },
  created() {
    this.request.get("/aliyun/getPlayAuth/" + this.$props.videoId).then(res => {
      if (res.code !== '200') {
        Message.error("获取视频地址失败")
        this.messageError("获取视频地址失败")
        return
      }
      this.options.playauth = res.data.playAuth
      this.loding = true
    }).catch(e => {
      this.messageError("获取视频地址失败")
    })
  }


}
</script>